<template>
	<div class="dynamic-table-example layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<div class="example-header mb20">
				<h2>动态表格系统使用示例</h2>
				<p>本示例展示如何使用动态表格系统来替代传统的硬编码表格</p>
			</div>

			<el-tabs v-model="activeTab" type="border-card">
				<!-- 配置管理 -->
				<el-tab-pane label="配置管理" name="config">
					<div class="tab-content">
						<h3>表格配置管理</h3>
						<p>在这里可以创建和管理动态表格的配置</p>
						<el-button type="primary" @click="goToConfigManage">
							<el-icon><Setting /></el-icon>
							前往配置管理
						</el-button>
					</div>
				</el-tab-pane>

				<!-- 现有资源模块改造 -->
				<el-tab-pane label="资源模块改造" name="resource">
					<div class="tab-content">
						<h3>现有资源模块改造方案</h3>
						<div class="resource-cards">
							<el-card 
								v-for="resource in resourceModules" 
								:key="resource.name"
								class="resource-card"
								shadow="hover"
							>
								<div class="resource-info">
									<h4>{{ resource.title }}</h4>
									<p>{{ resource.description }}</p>
									<div class="resource-fields">
										<el-tag 
											v-for="field in resource.fields" 
											:key="field"
											size="small"
											class="mr5 mb5"
										>
											{{ field }}
										</el-tag>
									</div>
								</div>
								<div class="resource-actions">
									<el-button size="small" @click="createResourceConfig(resource)">
										创建配置
									</el-button>
									<el-button size="small" type="success" @click="viewDynamicTable(resource.name)">
										查看表格
									</el-button>
								</div>
							</el-card>
						</div>
					</div>
				</el-tab-pane>

				<!-- 使用说明 -->
				<el-tab-pane label="使用说明" name="guide">
					<div class="tab-content">
						<h3>动态表格系统使用指南</h3>
						<div class="guide-steps">
							<el-steps :active="4" direction="vertical">
								<el-step title="创建表格配置">
									<template #description>
										<p>使用表单设计器创建表格字段配置，支持：</p>
										<ul>
											<li>基础字段：文本、数字、日期等</li>
											<li>选择字段：下拉框、单选、多选</li>
											<li>API选项：通过接口动态获取选项数据</li>
											<li>表格显示：配置哪些字段在表格中显示</li>
										</ul>
									</template>
								</el-step>
								<el-step title="保存配置">
									<template #description>
										<p>为配置指定唯一的名称，该名称将用于：</p>
										<ul>
											<li>路由地址：/dynamic-table/{配置名称}</li>
											<li>API接口：/api/dynamic-table/{配置名称}</li>
											<li>数据存储：按配置名称分表存储</li>
										</ul>
									</template>
								</el-step>
								<el-step title="配置API选项">
									<template #description>
										<p>对于下拉框等选择字段，可以配置：</p>
										<ul>
											<li>手动配置：直接输入选项</li>
											<li>API获取：从后台接口动态获取</li>
											<li>支持配置API地址、请求方法、数据路径等</li>
										</ul>
									</template>
								</el-step>
								<el-step title="使用动态表格">
									<template #description>
										<p>配置完成后，系统自动生成：</p>
										<ul>
											<li>表格页面：支持增删改查</li>
											<li>表单对话框：根据配置动态生成</li>
											<li>数据验证：根据必填等规则验证</li>
											<li>分页查询：支持关键词搜索</li>
										</ul>
									</template>
								</el-step>
							</el-steps>
						</div>
					</div>
				</el-tab-pane>

				<!-- API说明 -->
				<el-tab-pane label="API说明" name="api">
					<div class="tab-content">
						<h3>后端API接口说明</h3>
						<div class="api-docs">
							<h4>配置管理接口</h4>
							<el-table :data="configApis" style="width: 100%">
								<el-table-column prop="method" label="方法" width="80" />
								<el-table-column prop="url" label="接口地址" />
								<el-table-column prop="description" label="说明" />
							</el-table>

							<h4 class="mt20">数据管理接口</h4>
							<el-table :data="dataApis" style="width: 100%">
								<el-table-column prop="method" label="方法" width="80" />
								<el-table-column prop="url" label="接口地址" />
								<el-table-column prop="description" label="说明" />
							</el-table>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</el-card>

		<!-- 创建配置对话框 -->
		<el-dialog
			v-model="configDialogVisible"
			title="创建资源配置"
			width="90%"
			top="5vh"
		>
			<TableFormDesigner
				v-model="currentResourceConfig.fields"
				:config-name="currentResourceConfig.name"
				@save="onSaveResourceConfig"
			/>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="dynamicTableExample">
import { defineAsyncComponent, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Setting } from '@element-plus/icons-vue';
import { tableConfigApi } from '/@/api/tableConfig';
import { FieldType } from '/@/components/FormDesigner/types';

// 引入组件
const TableFormDesigner = defineAsyncComponent(() => import('/@/views/system/tableConfig/TableFormDesigner.vue'));

const router = useRouter();
const activeTab = ref('config');
const configDialogVisible = ref(false);

// 资源模块配置
const resourceModules = reactive([
	{
		name: 'server',
		title: '服务器资源',
		description: '管理服务器IP、端口、密码等信息',
		fields: ['名称', 'IP地址', '端口', '密码', '描述'],
		config: {
			name: 'server',
			description: '服务器资源管理',
			fields: [
				{
					id: 'field_1',
					type: FieldType.TEXT,
					label: '名称',
					name: 'name',
					required: true,
					showInTable: true,
					placeholder: '请输入服务器名称'
				},
				{
					id: 'field_2',
					type: FieldType.TEXT,
					label: 'IP地址',
					name: 'ip',
					required: true,
					showInTable: true,
					placeholder: '请输入IP地址'
				},
				{
					id: 'field_3',
					type: FieldType.NUMBER,
					label: '端口',
					name: 'port',
					required: true,
					showInTable: true,
					placeholder: '请输入端口号',
					defaultValue: 22
				},
				{
					id: 'field_4',
					type: FieldType.SELECT,
					label: '密码',
					name: 'credential',
					required: true,
					showInTable: false,
					optionSource: 'api',
					apiUrl: '/resource/options',
					apiMethod: 'post',
					apiDataPath: 'data.credential',
					apiLabelField: 'label',
					apiValueField: 'value',
					placeholder: '请选择密码'
				},
				{
					id: 'field_5',
					type: FieldType.TEXTAREA,
					label: '描述',
					name: 'description',
					required: false,
					showInTable: true,
					placeholder: '请输入描述信息'
				}
			]
		}
	},
	{
		name: 'credential',
		title: '密码资源',
		description: '管理用户名密码、私钥等认证信息',
		fields: ['名称', '密码类型', '用户名', '密码/私钥', '描述'],
		config: {
			name: 'credential',
			description: '密码资源管理',
			fields: [
				{
					id: 'field_1',
					type: FieldType.TEXT,
					label: '名称',
					name: 'name',
					required: true,
					showInTable: true,
					placeholder: '请输入密码名称'
				},
				{
					id: 'field_2',
					type: FieldType.SELECT,
					label: '密码类型',
					name: 'credentialType',
					required: true,
					showInTable: true,
					optionSource: 'manual',
					options: [
						{ label: '用户名密码', value: 'account' },
						{ label: '私钥', value: 'privateKey' }
					],
					placeholder: '请选择密码类型'
				},
				{
					id: 'field_3',
					type: FieldType.TEXT,
					label: '用户名',
					name: 'userName',
					required: false,
					showInTable: false,
					placeholder: '请输入用户名'
				},
				{
					id: 'field_4',
					type: FieldType.TEXTAREA,
					label: '密码/私钥',
					name: 'password',
					required: true,
					showInTable: false,
					placeholder: '请输入密码或私钥'
				},
				{
					id: 'field_5',
					type: FieldType.TEXTAREA,
					label: '描述',
					name: 'description',
					required: false,
					showInTable: true,
					placeholder: '请输入描述信息'
				}
			]
		}
	},
	{
		name: 'k8sCluster',
		title: 'K8S集群',
		description: '管理Kubernetes集群配置信息',
		fields: ['名称', '集群地址', '配置文件', '命名空间', '描述'],
		config: {
			name: 'k8sCluster',
			description: 'Kubernetes集群管理',
			fields: [
				{
					id: 'field_1',
					type: FieldType.TEXT,
					label: '名称',
					name: 'name',
					required: true,
					showInTable: true,
					placeholder: '请输入集群名称'
				},
				{
					id: 'field_2',
					type: FieldType.TEXT,
					label: '集群地址',
					name: 'clusterUrl',
					required: true,
					showInTable: true,
					placeholder: '请输入集群API地址'
				},
				{
					id: 'field_3',
					type: FieldType.TEXTAREA,
					label: '配置文件',
					name: 'kubeConfig',
					required: true,
					showInTable: false,
					placeholder: '请输入kubeconfig配置'
				},
				{
					id: 'field_4',
					type: FieldType.TEXT,
					label: '命名空间',
					name: 'namespace',
					required: false,
					showInTable: true,
					placeholder: '请输入默认命名空间',
					defaultValue: 'default'
				},
				{
					id: 'field_5',
					type: FieldType.TEXTAREA,
					label: '描述',
					name: 'description',
					required: false,
					showInTable: true,
					placeholder: '请输入描述信息'
				}
			]
		}
	},
	{
		name: 'env',
		title: '环境资源',
		description: '管理不同环境的配置信息',
		fields: ['名称', '环境类型', '配置信息', '状态', '描述'],
		config: {
			name: 'env',
			description: '环境资源管理',
			fields: [
				{
					id: 'field_1',
					type: FieldType.TEXT,
					label: '名称',
					name: 'name',
					required: true,
					showInTable: true,
					placeholder: '请输入环境名称'
				},
				{
					id: 'field_2',
					type: FieldType.SELECT,
					label: '环境类型',
					name: 'envType',
					required: true,
					showInTable: true,
					optionSource: 'manual',
					options: [
						{ label: '开发环境', value: 'dev' },
						{ label: '测试环境', value: 'test' },
						{ label: '预发环境', value: 'staging' },
						{ label: '生产环境', value: 'prod' }
					],
					placeholder: '请选择环境类型'
				},
				{
					id: 'field_3',
					type: FieldType.TEXTAREA,
					label: '配置信息',
					name: 'config',
					required: false,
					showInTable: false,
					placeholder: '请输入环境配置信息'
				},
				{
					id: 'field_4',
					type: FieldType.SELECT,
					label: '状态',
					name: 'status',
					required: true,
					showInTable: true,
					optionSource: 'manual',
					options: [
						{ label: '正常', value: 'active' },
						{ label: '停用', value: 'inactive' },
						{ label: '维护中', value: 'maintenance' }
					],
					placeholder: '请选择状态',
					defaultValue: 'active'
				},
				{
					id: 'field_5',
					type: FieldType.TEXTAREA,
					label: '描述',
					name: 'description',
					required: false,
					showInTable: true,
					placeholder: '请输入描述信息'
				}
			]
		}
	}
]);

// 当前配置
const currentResourceConfig = reactive({
	name: '',
	description: '',
	fields: []
});

// API文档数据
const configApis = reactive([
	{ method: 'POST', url: '/table-config/save', description: '保存表格配置' },
	{ method: 'GET', url: '/table-config/get', description: '获取表格配置' },
	{ method: 'POST', url: '/table-config/list', description: '获取配置列表' },
	{ method: 'PUT', url: '/table-config/update', description: '更新配置' },
	{ method: 'DELETE', url: '/table-config/delete', description: '删除配置' }
]);

const dataApis = reactive([
	{ method: 'POST', url: '/dynamic-table/{name}/data', description: '获取表格数据' },
	{ method: 'POST', url: '/dynamic-table/{name}/add', description: '添加数据' },
	{ method: 'PUT', url: '/dynamic-table/{name}/update', description: '更新数据' },
	{ method: 'DELETE', url: '/dynamic-table/{name}/delete', description: '删除数据' },
	{ method: 'GET', url: '/dynamic-table/{name}/options/{field}', description: '获取字段选项' }
]);

// 前往配置管理
const goToConfigManage = () => {
	router.push('/system/table-config');
};

// 创建资源配置
const createResourceConfig = (resource: any) => {
	currentResourceConfig.name = resource.config.name;
	currentResourceConfig.description = resource.config.description;
	currentResourceConfig.fields = [...resource.config.fields];
	configDialogVisible.value = true;
};

// 保存资源配置
const onSaveResourceConfig = (config: any) => {
	const saveData = {
		...currentResourceConfig,
		...config,
	};

	tableConfigApi().saveConfig(saveData)
		.then((res) => {
			if (res.code === 0) {
				configDialogVisible.value = false;
				ElMessage.success('配置创建成功');
			} else {
				ElMessage.error(res.msg || '创建失败');
			}
		})
		.catch((err) => {
			ElMessage.error(err.msg || '创建失败');
		});
};

// 查看动态表格
const viewDynamicTable = (name: string) => {
	router.push(`/dynamic-table/${name}`);
};
</script>

<style scoped>
.dynamic-table-example {
	height: 100%;
}

.example-header h2 {
	margin: 0 0 10px 0;
	color: #303133;
}

.example-header p {
	margin: 0;
	color: #909399;
	font-size: 14px;
}

.tab-content {
	padding: 20px;
}

.tab-content h3 {
	margin: 0 0 16px 0;
	color: #409eff;
}

.resource-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
	margin-top: 16px;
}

.resource-card {
	padding: 16px;
}

.resource-info h4 {
	margin: 0 0 8px 0;
	color: #303133;
}

.resource-info p {
	margin: 0 0 12px 0;
	color: #606266;
	font-size: 14px;
}

.resource-fields {
	margin-bottom: 16px;
}

.resource-actions {
	display: flex;
	gap: 8px;
}

.guide-steps {
	margin-top: 20px;
}

.guide-steps ul {
	margin: 8px 0;
	padding-left: 20px;
}

.guide-steps li {
	margin-bottom: 4px;
	color: #606266;
}

.api-docs h4 {
	margin: 20px 0 10px 0;
	color: #409eff;
}

.mr5 {
	margin-right: 5px;
}

.mb5 {
	margin-bottom: 5px;
}

.mt20 {
	margin-top: 20px;
}
</style>